<template>
  <div>
    <h1>新闻管理</h1>
    <div style="width: 90%; display: flex; flex-direction: row; justify-content: space-between; margin: 20px;">
      <div style="display: flex; ">
        <div style="display: flex; align-items: center; margin-right: 20px;">
          <el-input
            placeholder="请输入关键字"
            v-model="search.keyword"
            clearable
            @input="inputChange">
          </el-input>
        </div>
        <div style="display: flex; align-items: center; margin-right: 20px;">
          <el-select v-model="search.tid" placeholder="请选择" @change="updateType">
              <el-option v-for="t in types"
                :key="t.id"
                :label="t.tname"
                :value="t.id">
              </el-option>
          </el-select>
        </div>
        <el-button type="success" @click="searchList()">搜索</el-button>
      </div>
      <el-button type="success" @click="dialogFormVisible = true">新增新闻</el-button>
    </div>
    <!-- 表格 -->
    <MyTable ref="myTable" :params="tables"></MyTable>

    <!-- 弹出框 -->
    <el-dialog title="新增新闻" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="新闻封面" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost/file/uploader"
            :show-file-list="false"
            :on-success="uploaderSuccess">
            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="新闻标题" :label-width="formLabelWidth">
          <el-input v-model="form.subject" autocomplete="off" placeholder="请输入新闻标题"></el-input>
        </el-form-item>
        <el-form-item label="所属分类" :label-width="formLabelWidth">
          <el-select v-model="form.tid" placeholder="请选择">
              <el-option v-for="t in types"
                :key="t.id"
                :label="t.tname"
                :value="t.id">
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="form.writer" autocomplete="off" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="新闻内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.info">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertNews()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MyTable from "./MyTable"

  export default {
    components: {
      MyTable
    },
    data() {
      return {
        //弹出框的属性
        dialogFormVisible: false,
        formLabelWidth: '120px',
        //图片的url
        imageUrl: null,
        //搜索的条件
        search: {
          keyword: null,
          tid: null
        },
        //表单数据
        form: {
          subject: null,
          writer: null,
          info: null,
          fengmian: null,
          tid: null
        },
        //新闻分类
        types: [],
        //表格组件需要的参数对象
        tables: {
          //表头数组
          cols: [
            {prop: "id", label: "新闻编号"},
            {prop: "subject", label: "新闻标题"},
            {prop: "fengmian", label: "新闻封面", type: "img"},
            {prop: "writer", label: "作者"},
            {prop: "createTime", label: "发布时间"}
          ],
          //请求的参数
          request: {
            //表格请求的url
            url: "/newsInfo/list",
            //请求的数据
            data: this.search
          },
          //需要进行的操作
          actions:[
            {btnName: "修改", action: (row) => {
              console.log("修改按钮被点击了....", row);
            }},
            {btnName: "删除", action: (row) => {
              console.log("删除按钮被点击了....", row);
            }}
          ]
        }
      }
    },
    methods: {
      //新增新闻
      insertNews(){
        this.$.ajax({
          type:"POST",
          url: "/newsInfo/insert",
          data: this.form,
          success: (result) => {
            console.log("新增成功....");

            //刷新表格
            this.$refs.myTable.requestList();
            //关闭弹窗
            this.dialogFormVisible = false;
          }
        })
      },
      //查询所有分类列表
      queryTypes(){
        this.$.ajax({
          url: "/newsType/list",
          success: (result) => {
            this.types = result;
          }
        })
      },
      //生成成功的回调方法
      uploaderSuccess(resp){
        console.log("上传结果...", resp);
        this.form.fengmian = resp.data;

        //图片回显
        this.imageUrl = this.$.getImg(this.form.fengmian);
      },
      //搜索
      searchList(){
        console.log("开始搜索.......");
        //重新发送表单的查询请求
        this.$refs.myTable.requestList(this.search);
      },
      //修改分类
      updateType(){
        console.log("修改了下拉框");
        //直接触发搜索方法
        this.searchList();
      },
      //搜索框的变化
      inputChange(){
        //直接触发搜索方法
        this.searchList();
      }
    },
    mounted() {
      //查询新闻分类列表
      this.queryTypes();
    }
  }
</script>

<style>
   .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
</style>
